.kp_big_screen{
  width: 100%;
  height: 100%;
  padding:25px 10px 20px 40px;
  .show{
    display: block;
  }
  .hide{
    display: none;
  }
  .dim{
    opacity: 0.3;
  }
  .hight{
    opacity: 1;
  }
  .kp_screen_top{
    width: 100%;
    height: 70%;
    position: relative;
    .kp_rank{
      position: absolute;
      top:0;
      left:0;
      width: 22%;
      height: 100%;

      .rank_box{
        height: 100%;
        position: relative;
        //height: 104%;
        //background-image: url(../images/rank/rank_bg.png);
        //background-repeat: round;
        margin-top: -6%;
        img{
          height: 100%;
        }
        .rank_title{
          position: absolute;
          left:28%;
          //-webkit-transform:translate(-50%) ;
          top:8%;
          font-size:1.2vw;
          color: #4bc1fe;

        }
        .rank_con{
          position: absolute;
          width: 76%;
          height: 36%;
          left:45%;
          -webkit-transform:translate(-50%) ;
          top:16%;
          .polygon6,.polygon5,.polygon4,.polygon3,.polygon2,.polygon1,.rank_books{
            width: 100%;
            height: 100%;
            padding: 6px 10px;
            background-repeat: round;
            -webkit-transition: all 1s;

          }
          .polygon6{
            position: relative;
            width: 100%;
            height: 100%;
            background-image: url(../images/rank/polygon6.png);
            //background-repeat: round;
            .polygon5{
              background-image: url(../images/rank/polygon5.png);
              background-repeat: round;
              .polygon4{
                background-image: url(../images/rank/polygon4.png);
                background-repeat: round;
                .polygon3{
                  background-image: url(../images/rank/polygon3.png);
                  background-repeat: round;
                  .polygon2{
                    background-image: url(../images/rank/polygon2.png);
                    background-repeat: round;
                    .polygon1{
                      background-image: url(../images/rank/polygon1.png);
                      background-repeat: round;
                      position: relative;
                      .rank_books {
                        width: 80%;
                        height: 80%;
                        padding: 6px 10px 6px 10px;
                        background-repeat: round;
                        img{
                          width: 50%;
                          position: absolute;
                          left:24%;
                          top:0%;
                          -webkit-transform:translate(-50%,-50%);

                        }
                      }

                    }

                  }

                }

              }

            }
            .rank_flag{
              position: absolute;
              width: 2.5vw;
              height: 4vh;
              color:#fff;
              font-size: 0.6vw;
              line-height: 4vh;
              text-align: center;
            }
            .flag_left_top{
              left:19%;
              top:0;
              background-image: url(../images/rank/green_left.png);
              background-repeat: round;
            }
            .flag_left_mid{
              left:4%;
              top:41%;
              background-image: url(../images/rank/green_left.png);
              background-repeat: round;
            }
            .flag_left_bot{
              left:20%;
              bottom:0;
              background-image: url(../images/rank/green_left.png);
              background-repeat: round;
            }
            .flag_right_top{
              right:19%;
              top:0;
              background-image: url(../images/rank/green_right.png);
              background-repeat: round;
            }
            .flag_right_mid{
              right:4%;
              top:41%;
              background-image: url(../images/rank/green_right.png);
              background-repeat: round;
            }
            .flag_right_bot{
              right:20%;
              bottom:0;
              background-image: url(../images/rank/green_right.png);
              background-repeat: round;
            }

          }


        }
        .rank_des{
          position: absolute;
          width: 100%;
          height: 50%;
          left:0;
          top:50%;
          padding-top:2%;
          .rank_des_pub{
            width: 100%;
            height: 16%;
            //border:1px solid red;
            padding-left: 8%;
            padding-top: 5%;
            font-size: 1vw;
            color:#9ca4b2;
            span:nth-of-type(1){
              font-size: 0.01vw;
              margin-right: 5%;
              color:#fff;
            }
          }


        }

      }
    }
    .kp_banner{
      height: 100%;
      width: 100%;
      padding: 0 30% 0 24%;
      //border:1px solid green;
      .banner_header{
        position: relative;
        width: 100%;
        height: 15%;
        //padding-top: 20px;
        background-repeat:round;
        //margin-bottom: 30px;
        .left_bg{
          float: left;
          //display: inline-block;
          //width: 204px;
          //height: 80px;
          width: 23%;
          margin-left: 3vw;
          //background: url(../images/logo_left.png) center center no-repeat;
          //background-size: 130px 49px;
          img{
            width: 100%;
          }
        }
        .right_bg{
          float: right;
          //display: inline-block;
          //width: 204px;
          //height: 80px;
          //background: url(../images/logo_right.png) center center no-repeat;
          //background-size: 130px 49px;
          width: 23%;
          margin-right: 3vw;
          img{
            width: 100%;
          }
        }
        .header_logo{
          position: absolute;
          top: 60%;
          left: 50%;
          transform: translate(-50%,-102%);
          width: 40%;
          img{
            width: 100%;
          }
        }
        p{
          position: absolute;
          top: 60%;
          left: 50%;
          transform: translate(-50%,-9%);
          font-size: 1.5vw;
          color: #4bc1fe;


        }
      }
      .banner_con{
        width: 100%;
        height: 77%;
        margin-left:-1vw;
        //border:1px solid blue;
        //display: flex;
        flex-direction: column;
        .kp_line_title{
          position: relative;
          width: 6vw;
          margin-left:4vw;
          margin-bottom: 3vh;
          img{
            width: 100%;
          }
          p:nth-of-type(1){
            position: absolute;
            width: 240%;
            font-size: 10px;
            left:50%;
            top:2px;
            color:#2d6c8c;

          }
          p:nth-of-type(2){
            width: 240%;
            position: absolute;
            font-size: 1.2vw;
            color: #4bc1fe;
            font-family: 'AdobeHeitiStd-Regular';
            left:50%;
            top:2vh;

          }
        }
        .banner_pic{
          height: 94%;
          margin-top:-10px;
          background-image: url(../images/banner/outer_border.png);
          background-repeat: round;
          //padding: 9px 25px 59px 115px;
          padding: 1.5% 3% 6% 13%;
          overflow: hidden;
          position: relative;
          .banner_mid_bg{
            width: 96%;
            height: 92%;
            background-image: url(../images/banner/mid_border.png);
            background-repeat: round;
            position: relative;
            //padding: 4% 8% 2% 2%;
            .swiper-container {
              width: 100%;
              height: 104%;
              margin:auto;
              border-radius: 10% 0 10% 0;
              border:1px solid #50b4ea;
              .swiper-wrapper{
                width: 100%;
                height: 100%;
                .swiper-slide{
                  width: 100%;
                  height: 100%;
                  text-align: center;
                  //margin-right: 30px;
                  //font-size: 18px;
                  //background: #fff;
                  overflow: hidden;

                  /* Center slide text vertically */
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: -webkit-flex;
                  display: flex;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  -webkit-justify-content: center;
                  justify-content: center;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  -webkit-align-items: center;
                  align-items: center;
                  img{
                    width: 100%;
                  }

                }

              }

            }
            #banner_mid_bg2{
              width: 100%;
              position: absolute;
              left:0;
              top:14%;

            }

          }
          .banner_run{
            width: 100%;
            overflow: hidden;
            padding-left:20px;
            margin-top:3.5%;
            ul{
              li{
                float: left;
                list-style: none;
                width: 1.2%;
                margin-right:5px;
                img{
                  width: 100%;
                }
              }
            }
          }
          .lamp_line{
            width: 80%;
            position: absolute;
            left:13%;
            bottom:6%;
            img{
              width: 100%;
            }
          }
        }



      }
    }
    .kp_borrow{
      position: absolute;
      top:0;
      right:0;
      width: 28%;
      height: 100%;
      //padding: 20px;
      padding-left: 0;
      .kp_date{
        width: 100%;
        height: 16%;
        color:#408fba;
        //margin-bottom: 30px;
        .kp_weather{
          float: left;
          margin-right: 2vw;
          //margin-left:104px;
          font-size: 1vw;
        }
        .kp_time{
          float: left;
          #kp_clock{
            font-size: 1vw;
          }
          #kp_t{
            #t_h,#t_m{
              font-size:2vw;
              margin-top:-2%;
            }
            #t_s{
              font-size: 1vw;
              margin-left:2px;
            }
            #t_current{
              font-size:10px;
            }
          }
        }
      }
      .kp_linecon{
        width: 100%;
        height: 58%;
        margin-bottom:-4px;
        .kp_line_title{
          position: relative;
          //width:146px;
          //height: 58px;
          //margin-left: 80px;
          width:6vw;
          //height: 12%;
          margin-left:3%;
          //background: url(../images/pub_icon.png) no-repeat;
          //background-size: 73px 29px;
          //margin-bottom: 3%;
          img{
            width: 100%;
          }
          p:nth-of-type(1){
            position: absolute;
            width: 240%;
            font-size: 10px;
            left:50%;
            top:2px;
            color:#2d6c8c;

          }
          p:nth-of-type(2){
            width: 240%;
            position: absolute;
            font-size: 1.2vw;
            color: #4bc1fe;
            font-family: 'AdobeHeitiStd-Regular';
            left:50%;
            top:2vh;

          }
        }
        .kp_line{
          position: relative;
          width: 100%;
          height: 80%;
          margin-top:5px;
          img{
            width: 92%;
          }
          .line_title{
            position: absolute;
            left:50%;
            top:3%;
            -webkit-transform: translate(-50%);
            font-size:1.2vw;
            color:#6ff2f7;

          }

        }
      }
      .borrow_num{
        width: 100%;
        height: 10%;
        margin-top:5%;
        ul{
          width: 100%;
          margin:auto;
          margin-bottom: 3%;
          //margin-top:30px;
          padding-left:3%;

          li{
            width: 18%;
            height: 100%;
            float: left;
            text-align: left;
            //padding: 10px 0;
            color:#fff;
            p{
              margin-bottom: 3px;
              color:#3d8a8e;
              font-size: 0.5vw;
            }
            span{
              color:#70f5fc;
              font-size: 0.5vw;

            }
            span:nth-of-type(1){
              font-size: 1.7vw;

            }

          }
        }
      }


    }
  }
  .kp_screen_bottom{
    width: 100%;
    height: 30%;
    //padding-top: 2%;
    .kp_count{
      width: 36%;
      height: 100%;
      float: left;
      padding-right:4%;
      .kp_line_title{
        position: relative;
        //width:146px;
        //height: 58px;
        //margin-left: 80px;
        width: 6vw;
        //height: 12%;
        margin-left:3%;
        //background: url(../images/pub_icon.png) no-repeat;
        //background-size: 73px 29px;
        margin-bottom: 3%;
        img{
          width: 100%;
        }
        p:nth-of-type(1){
          position: absolute;
          width: 240%;
          font-size: 10px;
          left:50%;
          top:2px;
          color:#2d6c8c;

        }
        p:nth-of-type(2){
          width: 240%;
          position: absolute;
          font-size: 1.2vw;
          color: #4bc1fe;
          font-family: 'AdobeHeitiStd-Regular';
          left:50%;
          top:2vh;

        }
      }
      .count_num{
        height: 90%;
        margin-left:20px;
        margin-top:-20px;
        background-image: url(../images/count/count_bg.png);
        background-repeat: round;
        .count_num_top{
          width: 100%;
          height: 74%;
          ul{
            width: 100%;
            height: 100%;
            //padding:25px 50px 0 40px;
            padding: 5% 8% 1% 6%;
            li{
              float: left;
              width: 33.33%;
              height: 100%;
              //border:1px solid red;
              .num_left{
                float: left;
                color:#fff;
                font-size:1vw;
                text-align: right;
                margin-right: 1vw;
                p:nth-of-type(2){
                  font-size:1vw;
                  color: #4bc1fe;
                }
              }
              .num_right{
                float: left;
                width: 30%;
                height: 100%;
                position: relative;
                //border: 1px solid red;
                //overflow: hidden;
                .box2{
                  //width: 20px;
                  //height: 130px;
                  width: 70%;
                  height: 100%;
                  border:1px solid #818b98;
                  position: relative;
                  margin:auto;
                  /*overflow: hidden;*/
                  .box2_inner{
                    //width: 20px;
                    //height: 130px;
                    width: 108%;
                    height: 102%;
                    border:1px solid #818b98;
                    position: absolute;
                    top:1px;
                    right:1px;
                    //overflow: hidden;
                    /*background-color: #142f5c;*/
                    /*background-image: url(static/images/count/copy/white_bar.png);*/
                    /*background-repeat: round;*/
                  }
                  .box2_inner_inner{
                    //width: 16px;
                    //height: 126px;
                    width: 90%;
                    height: 98%;
                    position: absolute;
                    top:2px;
                    left:0;
                    overflow: hidden;
                    background-color: #142f5c;
                    //background-color: red;

                    //img{////之前整个的图片
                    //  position: absolute;
                    //  top:200%;
                    //  left:50%;
                    //  -webkit-transform:translate(-50%,-50%);
                    //}
                    img{
                      position: absolute;
                      left:50%;
                      -webkit-transform:translate(-50%) ;
                    }
                    img:nth-of-type(1){
                      top:56%;
                    }
                    img:nth-of-type(2){
                      //top:51%;
                      top:50%;

                    }
                    img:nth-of-type(3){
                      //top:47%;
                      top:44%;

                    }
                    img:nth-of-type(4){
                      //top:42%;
                      top:39%;

                    }
                    img:nth-of-type(5){
                      //top:38%;
                      top:33%;

                    }
                    img:nth-of-type(6){
                      //top:33%;
                      top:28%;

                    }
                    img:nth-of-type(7){
                      //top:29%;
                      top:22%;

                    }
                    img:nth-of-type(8){
                      //top:24%;
                      top:17%;

                    }
                    img:nth-of-type(9){
                      //top:20%;
                      top:11%;

                    }
                    img:nth-of-type(10){
                      //top:16%;
                      top:6%;

                    }
                    img:nth-of-type(11){
                      //top:11%;
                      top:0%;

                    }
                    img:nth-of-type(12){
                      //top:7%;
                      top:-5%;

                    }
                    img:nth-of-type(13){
                      //top:3%;
                      top:-11%;

                    }
                    img:nth-of-type(14){
                      //top:-2%;
                      top:-16%;

                    }
                    img:nth-of-type(15){
                      //top:-6%;
                      top:-22%;

                    }
                    img:nth-of-type(16){
                      //top:-11%;
                      top:-27%;

                    }
                    img:nth-of-type(17){
                      //top:-15%;
                      top:-33%;

                    }
                    img:nth-of-type(18){
                      //top:-20%;
                      top:-38%;

                    }
                    img:nth-of-type(19){
                      //top:-24%;
                      top:-44%;

                    }
                    img:nth-of-type(20){
                      //top:-29%;
                      top:-49%;

                    }
                    //img:nth-of-type(21){
                    //  top:-24%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(22){
                    //  top:-27%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(23){
                    //  top:-30%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(24){
                    //  top:-33%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(25){
                    //  top:-36%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(25){
                    //  top:-36%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(25){
                    //  top:-36%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(26){
                    //  top:-39%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(27){
                    //  top:-42%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(28){
                    //  top:-45%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(29){
                    //  top:-48%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(30){
                    //  top:-51%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(31){
                    //  top:-54%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(32){
                    //  top:-57%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(33){
                    //  top:-60%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(34){
                    //  top:-63%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(35){
                    //  top:-66%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(36){
                    //  top:-69%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(37){
                    //  top:-72%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(38){
                    //  top:-75%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(39){
                    //  top:-78%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(40){
                    //  top:-81%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(42){
                    //  top:-84%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(43){
                    //  top:-87%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(44){
                    //  top:-90%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(45){
                    //  top:-93%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(46){
                    //  top:-96%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(47){
                    //  top:-99%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(48){
                    //  top:-102%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(49){
                    //  top:-105%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(50){
                    //  top:-108%;
                    //  left:-14%;
                    //}
                    //



                  }
                }

                //.num_outer_bg_img{
                //  width: 100%;
                //}
                //.white_bar_box{
                //  //width: 100%;
                //  //border:1px solid red;
                //  //overflow: hidden;
                //  position: absolute;
                //  //left:70%;
                //  //top:50%;
                //  //-webkit-transform:translate(-50%,-50%);
                //  width: 70%;
                //  left:4%;
                //  top:-2%;
                //  background-image: url(../images/count/white_bar.png);
                //  background-repeat: round;
                //
                //  img{
                //    width: 58%;
                //  }
                //}
                //.num_white_cover{
                //  width: 100%;
                //  position: absolute;
                //  left:-18%;
                //  top:0%;
                //  background-image: url(../images/count/outer_bg.png);
                //  img{
                //    width: 100%;
                //  }
                //}

              }
            }
          }
        }
        .count_num_bottom{
          width: 83%;
          margin: auto;
          height: 24%;
          color:#1a89c3;
          font-size: 1em;
          //margin-left: 30px;
          p{
            //margin-left: 30px;
            //margin-bottom: 10px;
          }
          .box{
            width: 100%;
            margin: auto;
            .rectangle_bg{
              width: 100%;
              height: 1.5em;
              position: relative;
              background-color: #142f5d;
              .rectangle{
                height: 100%;
                width: 57%;
                background-color: #1a89c3;
                line-height: 1.2em;
                position: absolute;
                top:0;
                left:0;
                padding-right: 1em;
                color:#fff;
                text-align: right;
                font-size: 1.5em;
                span:nth-of-type(2){
                  font-size: 0.5em;
                }
              }
            }
          }

        }
      }
    }
    .kp_notice{
      width: 35%;
      height: 100%;
      //display: inline-block;
      float: left;
      .kp_line_title{
        position: relative;
        //width:146px;
        //height: 58px;
        //margin-left: 80px;
        width: 6vw;
        //height: 12%;
        margin-left:3%;
        //background: url(../images/pub_icon.png) no-repeat;
        //background-size: 73px 29px;
        margin-bottom: 3%;
        img{
          width: 100%;
        }
        p:nth-of-type(1){
          position: absolute;
          width: 240%;
          font-size: 10px;
          left:50%;
          top:2px;
          color:#2d6c8c;

        }
        p:nth-of-type(2){
          width: 240%;
          position: absolute;
          font-size: 1.2vw;
          color: #4bc1fe;
          font-family: 'AdobeHeitiStd-Regular';
          left:50%;
          top:2vh;

        }
      }
      .notice_con{
        width: 100%;
        height: 94%;
        margin-top: -30px;
        background-image: url(../images/notice.png);
        background-repeat: round;
        .notice_con_title{
          width: 100%;
          font-size: 1vw;
          text-align: center;
          padding-top: 1.5vh;
          color: #4bc1fe;
        }
        .notice_con_list{
          width: 95%;
          height: 67%;
          padding: 5px 15px 15px 15px;
          margin:auto;
          margin-top:15px;
          position: relative;
          //border:1px solid red;
        }
      }


    }
    .kp_recommend{
      width: 26%;
      height: 100%;
      margin-top: -7vh;
      margin-left:2vw;
      float: left;
      padding: 10px;
      .kp_line_title{
        position: relative;
        float: left;
        width: 4vw;
        margin-left:3%;
        //background: url(../images/pub_icon.png) no-repeat;
        //background-size: 73px 29px;
        margin-bottom: 3%;
        img{
          width: 100%;
        }
        p:nth-of-type(1){
          position: absolute;
          width: 5px;
          font-size: 10px;
          left:90%;
          top:30px;
          color:#2d6c8c;
          -webkit-transform: rotateZ(90deg)

        }
        p:nth-of-type(2){
          width: 20px;
          position: absolute;
          font-size: 1.2vw;
          color: #4bc1fe;
          //font-family: 'AdobeHeitiStd-Regular';
          left:50%;
          top:25px;

        }
      }
      .recommend_con{
        float: left;
        width: 70%;
        height: 100%;
        .recommend_con_circle5{
          width: 95%;
          height: 95%;
          position: relative;
          img{
            width: 100%;
          }
          .recommend_con_circle4{
            width: 78%;
            position: absolute;
            left:46.5%;
            top:64%;
            -webkit-transform:translate(-50%,-50%);
            img{
              width: 100%;
            }

          }
          .recommend_con_circle{
            width: 72%;
            //border:1px dashed #275a76;
            //border-radius: 50%;
            //padding:4px 0 0 4px;
            position: absolute;
            left:46%;
            top:64%;
            -webkit-transform:translate(-50%,-50%);
            img{
              width: 100%;
            }


          }
          .recommend_con_circle3{
            width: 68%;
            position: absolute;
            left:46%;
            top:64%;
            -webkit-transform:translate(-50%,-50%);
            img{
              width: 100%;
            }

          }
          .recommend_con_circle2{
            width: 60%;
            position: absolute;
            left:46%;
            top:64%;
            -webkit-transform:translate(-50%,-50%);
            img{
              width: 100%;
            }

          }
          .recommend_con_circle1{
            width: 50%;
            position: absolute;
            left:46%;
            top:64%;
            -webkit-transform:translate(-50%,-50%);
            img{
              width: 100%;
            }

          }
          .recommend_con_book{
            width: 30%;
            position: absolute;
            left:47%;
            top:64%;
            -webkit-transform:translate(-50%,-50%);
            img{
              width: 100%;
            }

          }
          .recommend_bot_border{
            width: 70%;
            height: 2em;
            position: absolute;
            left:43%;
            //bottom:-30%;
            bottom:-55%;
            -webkit-transform:translate(-50%,-50%);
            background-image: url(../images/recommend/bot_border.png);
            background-repeat: round;
            color: #4bc1fe;
            text-align: center;
            line-height: 2em;


          }
          .recommend_sao_title{
            position: absolute;
            right:-15%;
            top:25%;
            color: #4bc1fe;
            width: 8em;
            height: 1.5em;
            text-align: center;
            //border-radius: 50% 50% 0 0;
            //border:1px solid red;
            -webkit-transform: rotateZ(45deg);
            font-size: 1.5em;
            span{
              float: left;
              margin-right:0.5em;
            }

            span:nth-of-type(1){
              -webkit-transform: rotateZ(-30deg);
            }
            span:nth-of-type(2){
              -webkit-transform: rotateZ(20deg);
              padding-top: -0.5em;


            }
            span:nth-of-type(3){
              -webkit-transform: rotateZ(15deg);
            }
            span:nth-of-type(4){
              -webkit-transform: rotateZ(40deg);
              padding-top: 0.5em;
            }




          }
          .recommend_sao_num{
            position: absolute;
            right:7%;
            bottom:-12%;
            color: #4bc1fe;
            text-align: right;
            font-size:0.5em;
            div:nth-of-type(1){
              font-size:1em;
            }





          }


        }








        ///以前写死的布局
        //.recommend_con_circle5{
        //  //width: 372px;
        //  //height: 372px;
        //  //background-image: url(../images/recommend/circle5.png);
        //  //background-repeat: round;
        //  position: absolute;
        //
        //  width: 80%;
        //  background-image: url(../images/recommend/circle5.png);
        //  //background-repeat: round;
        //
        //
        //  padding:24px 0 0 16px;
        //  position: relative;
        //  //.recommend_con_circle4{
        //  //  width: 308px;
        //  //  height: 308px;
        //  //  background-image: url(../images/recommend/circle4.png);
        //  //  background-repeat: round;
        //  //  padding:9px 0 0 7px;
        //  //  .recommend_con_circle{
        //  //    width: 290px;
        //  //    height: 290px;
        //  //    border:1px dashed #275a76;
        //  //    border-radius: 50%;
        //  //    padding:4px 0 0 4px;
        //  //    .recommend_con_circle3{
        //  //      width: 281px;
        //  //      height: 281px;
        //  //      background-image: url(../images/recommend/circle3.png);
        //  //      background-repeat: round;
        //  //      padding:17px 0 0 16px;
        //  //      .recommend_con_circle2{
        //  //        width: 248px;
        //  //        height: 248px;
        //  //        background-image: url(../images/recommend/circle2.png);
        //  //        background-repeat: round;
        //  //        padding:10px 0 0 10px;
        //  //        .recommend_con_circle1{
        //  //          width: 226px;
        //  //          height: 226px;
        //  //          background-image: url(../images/recommend/circle1.png);
        //  //          background-repeat: round;
        //  //
        //  //        }
        //  //
        //  //
        //  //      }
        //  //    }
        //  //  }
        //  //}
        //  //.recommend_con_book{
        //  //  width: 150px;
        //  //  height: 202px;
        //  //  position: absolute;
        //  //  top:50%;
        //  //  left:50%;
        //  //  -webkit-transform:translate(-62%,-54%) ;
        //  //}
        //
        //}

      }

    }
  }
}